<template>
  <div class="subscribe">
    <div class="search_box_top">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane :key="item.id" v-for="item in activeLiss">
          <template #tab>
            <span @click="activeClick(item)">
              {{ item.name }}
              <span v-if="item.name == '品牌'" class="Beta">Beta</span>
            </span>
          </template>
        </a-tab-pane>
      </a-tabs>
    </div>
    <div class="subskeyword">
      <div class="subsk_top">
        <img style="width: 16px; height: 16px" src="@/assets/img/4382.png" alt="" />
        <span class="subsk_wds">订阅关键词（{{ dynamicTags.length }}/{{
        Number(
          activeKey == 1 ? setting.biaoxun_k_num : setting.company_k_num
        )
      }}）</span>
      </div>
      <div style="margin-top: 15px">
        <el-button danger style="color: #fb4204; border: 1px solid #f43107" class="button-new-tag ml-1" size="small"
          @click="add">
          + 添加
        </el-button>
        <el-tag v-for="tag in dynamicTags" style="
            margin-left: 15px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #f43107;
            color: #333;
          " :key="tag.id" class="mx-1" closable :disable-transitions="false" @close="handleClose(tag)">
          {{ tag.kewords }}
        </el-tag>
      </div>
    </div>
    <!-- 公告类型 -->
    <div class="gg-type">
      <div class="type-1" style="margin-bottom: 10px;">
        <div class="hong"></div>
        <div class="type-tit">公告类型</div>
      </div>
      <div class="type-2">
        <el-checkbox-group v-model="checkList" v-for="item in opbulletin">
          <el-checkbox class="Notice-1" :label="item.value" @change="handleCheckAllChange">{{ item.label
            }}</el-checkbox>
          <el-checkbox class="Notice-2" :label="item1.value" v-for="item1 in item.children">{{ item1.label
            }}</el-checkbox></el-checkbox-group>

        <!-- <div class="type-item">{{ item }}</div> -->
      </div>
    </div>
    <!-- 招标公司类型 -->
    <div class="gg-type">
      <div class="type-1">
        <div class="hong"></div>
        <div class="type-tit">招标公司类型</div>
      </div>
      <div class="type-2 type-z">
        <el-checkbox-group v-model="checkList1" v-for="item in companyList">
          <el-checkbox class="company" :label="item.id">{{ item.label }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 项目地区 -->
    <div class="gg-type">
      <div class="type-1">
        <div class="hong"></div>
        <div class="type-tit">项目地区</div>
      </div>
      <div class="type-2 type-z" style="width: 80%;">
        <el-checkbox-group class="diqu" v-model="checkList2" v-for="item in cityList[0].children">
          
          <el-checkbox-button class="company" :label="item.adcode">{{ item.label }}</el-checkbox-button>
        </el-checkbox-group>
      </div>
    </div>
    <!-- 金额区间 -->
    <div class="gg-type">
      <div class="type-1">
        <div class="hong"></div>
        <div class="type-tit">金额区间</div>
      </div>
      <div class="type-2 type-z" style=" margin-bottom: 20px;">

        <el-radio-group style="height: 24px;" v-model="checkList3" v-for="item in moneyBids">
          <el-radio-button style="height: 24px;" class="company" :label="item.id">{{ item.name }}</el-radio-button>
        </el-radio-group>
        <div style="display: flex;" v-if="checkList3 == '9'">
          <div class="jine">
            <input class="search_mput" type="text" v-model="radio1_min" placeholder="最小值" />
            <span style="margin-right: 10px;line-height: 24px;">至</span>
            <input class="search_mput" type="text" v-model="radio1_max" placeholder="最大值" />
          </div>
          <div class="cz">重置</div>
          <div class="qd">确定</div>

        </div>
        <!-- <div style="display: flex; margin-top: 10px" >
              <div class="search_money">
                <input class="search_mput" type="text" v-model="radio1_min" placeholder="最小值" />
                <span style="margin-right: 10px">至</span>
                <input class="search_mput" type="text" v-model="radio1_max" placeholder="最大值" />
              </div>
              万元
            </div> -->
      </div>
    </div>
    <!-- 采购类别 -->
    <div class="gg-type">
      <div class="type-1" >
        <div class="hong"></div>
        <div class="type-tit">采购类别</div>
      </div>
      <div class="type-2 type-z">
        <el-checkbox-group v-model="checkList4" v-for="item in caigouList">
          <el-checkbox class="company" :label="item.es_tag">{{ item.name }}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
     <!-- 搜索范围 -->
     <div class="gg-type">
      <div class="type-1" >
        <div class="hong"></div>
        <div class="type-tit">搜索范围</div>
      </div>
      <div class="type-2 type-z">
        <el-radio-group v-model="checkList5" v-for="item in realm">
          <el-radio class="company" :label="item.id">{{ item.name }}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <!-- 匹配模式 -->
    <div class="gg-type" style="margin-bottom: 100px;">
      <div class="type-1">
        <div class="hong"></div>
        <div class="type-tit">匹配模式</div>
      </div>
      <div class="type-2 type-z" style=" margin-bottom: 20px;">

        <el-radio-group style="height: 24px;" v-model="checkList6" v-for="item in quality">
          <el-radio-button style="height: 24px;" class="company" :label="item.id">{{ item.name }}</el-radio-button>
        </el-radio-group>
       
      </div>
    </div>
    <div class="bottom">
      <div style="text-align: center; padding-bottom: 20px">
          <a-button @click="inputVisible = false">取消</a-button>
          <a-button type="primary" color="#6675FF" style="color: #fff; margin-left: 20px" @click="defineClick">
            确定
          </a-button>
        </div>
    </div>
    <el-dialog v-model="inputVisible" width="30%" style="height: 250px" :before-close="handleInputConfirm">
      <template #header>
        <div class="flex items-center gap-[6px]">
          <div class="h-[16px] w-[4px] bg-[#F43107] rounded-[10px]"></div>
          <span style="font-weight: 500; font-size: 16px; color: #304156">添加关键词</span>
        </div>
      </template>

      <div style="text-align: center;">
        <el-input style="width: 100%" v-model="inputValue" placeholder="请输入关键词(10字符以内)" />
      </div>
      <template #footer>
        <div style="text-align: center; padding-bottom: 20px">
          <a-button @click="inputVisible = false">取消</a-button>
          <a-button type="primary" color="#6675FF" style="color: #fff; margin-left: 20px" @click="defineClick">
            确定
          </a-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  bxsubscriptionadd,
  bxsubscriptionlist,
  bxsubscriptiondel,
  bxsubscriptionallocation
} from "../../../../Api/work";
import { getInfomationchild1, get_company_type,get_industry } from "@/Api/ccc.js";
import domData from "@/utils/json/dom.json";
import { message } from 'ant-design-vue'
let activeKey = ref("1");
const checkList = ref()
const checkList1 = ref()
const checkList2  =ref()
const checkList3 = ref()
const checkList4 = ref()
const checkList5 = ref()
const checkList6 = ref()
const radio1_min = ref()
const radio1_max = ref()

const convertToTreeArray_=(items)=> { //树形数据处理
  const map = {};
  const result = [];
  items.forEach(item => {
    map[item.adcode] = { ...item, children: [] };
  });
  items.forEach(item => {
    if (item.parent !== null && map[item.parent]) {
      map[item.parent].children.push(map[item.adcode]);
    } else {
      result.push(map[item.adcode]);
    }
  });

  return result;
}
let cityList
cityList = convertToTreeArray_(domData)
cityList[0].children.unshift( {adcode: null, lng: 116.405285, lat: 39.904989, label: '全国', level: 'province',parent:null,value: "全国"})
// 金额区间
const moneyBids = [
  {
    id: "2",
    name: "0~10万",
  },
  {
    id: "3",
    name: "10~20万",
  },
  {
    id: "4",
    name: "20~50万",
  },
  {
    id: "5",
    name: "50~100万",
  },
  {
    id: "6",
    name: "100~200万",
  },
  {
    id: "7",
    name: "200~500万",
  },
  {
    id: "8",
    name: "500~1000万",
  },
  {
    id: "9",
    name: "自定义",
  },
];
let activeLiss = [
  {
    id: "1",
    name: "公告标讯",
  },
  {
    id: "2",
    name: "企业公司",
  },
];
// 搜索范围
const realm = ref([
  {
    id: "1",
    name: "产品",
  },
  {
    id: "2",
    name: "标题",
  },
  {
    id: "3",
    name: "品牌",
    // disabled: "disabled",
  },
  {
    id: "4",
    name: "招标公司",
  },
  {
    id: "5",
    name: "中标公司",
  },
  {
    id: "6",
    name: "代理公司",
  },
  {
    id: "7",
    name: "全文",
  },
]);
let quality = [
  {
    id: "2",
    name: "精准匹配",
  },
  {
    id: "3",
    name: "模糊匹配",
  },
];
const activeClick = (id) => {
  activeKey.value = id.id;

  before();
  console.log(activeKey.value);
};

const inputValue = ref("");
const dynamicTags = ref([]);
const inputVisible = ref(false);

const handleClose = async (tag) => {
  const res = await bxsubscriptiondel({
    sub_id: tag.id,
  });

  before();
};

const add = () => {
  if (
    dynamicTags.value.length ==
    Number(activeKey == 1 ? setting.biaoxun_k_num : setting.company_k_num)
  )
    return;
  inputVisible.value = true;
};

const handleInputConfirm = (done) => {
  done();
};

const defineClick = async () => {
  if (!inputValue.value) {
    message.error("请输入");
    return;
  }

  const res = await bxsubscriptionadd({
    type_id: activeKey.value,
    kewords: inputValue.value,
  });

  if (res?.data?.code == 1) {
    message.success("操作成功");
    inputVisible.value = false;
    inputValue.value = "";

    before();
  } else {
    message.error(res?.data?.msg);
  }


};
const setting = ref({
  biaoxun_k_num: 20,
  company_k_num: 20,
});
const before = async () => {
  const res = await bxsubscriptionlist({ type_id: activeKey.value });
  dynamicTags.value = res.data.data;

  const res2 = await bxsubscriptionallocation();
  setting.value = res2.data.data;
};
before();

const opbulletin = ref([]);
getInfomationchild1().then((res) => {
  if (res.data.status == 1) {
    opbulletin.value = res.data.data
  }else{
    message.error(res.data.msg);
  }
  
});
const handleCheckAllChange = (val) => {
  console.log(val, checkList.value);
  // checkList.value = val ? opbulletin.value : [];
  // this.checkedCities = val ? opbulletin.value : [];
  // this.isIndeterminate = false;
  // this.checkInvert = false;
}
const companyList = ref([]);
get_company_type().then((res) => {
  if (res.data.status == 1) {
    companyList.value = res.data.data
  }else{
    message.error(res.data.msg);
  }
  
});
//
const caigouList = ref([]);
get_industry().then((res) => {
  if (res.data.status == 1) {
    caigouList.value = res.data.data
  }else{
    message.error(res.data.msg);
  }
  
});
</script>

<style lang="scss" scoped>
:deep(.el-dialog__footer) {
  padding-bottom: 20px;
}

.subscribe {
  // height: calc(100vh - 340px);
  background-color: #fff;
  margin-top: -20px;
}

.el-tag {
  padding: 15px;
}

.search_box_top {
  .Beta {
    width: 30px;
    height: 14px;
    background: #fb4204;
    padding: 2px;
    border-radius: 3px;
    color: #f6f6f6;
  }
}

.subskeyword {
  padding-left: 20px;
  background: linear-gradient(180deg, #fce2e0 0%, rgba(252, 226, 224, 0) 100%);
  border-radius: 8px;
  padding-bottom: 20px;

  .subsk_top {
    display: flex;
    align-items: center;
    height: 56px;
    border-bottom: 1px solid #dbdfff;

    .subsk_wds {
      margin-left: 15px;
      font-size: 16px;
      color: #304156;
    }
  }
}

::v-deep .el-button--small {
  padding: 15px;
}

::v-deep .el-tag .el-tag__close {
  color: #fb4204;
}

::v-deep .el-tag .el-tag__close:hover {
  background: #fff;
}

.hong {
  width: 4px;
  height: 16px;
  background: #F43107;
  border-radius: 10px;
  margin-right: 6px;
}

.gg-type {
  padding: 20px 20px 0 20px;
}

.type-1 {
  display: flex;

}

.type-2 {
  margin-left: 10px;
}

.type-tit {
  font-size: 16px;
}

.type-z {
  display: flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.company {
  width: fit-content;
  margin-right: 20px;
  height: 14px;
  margin-top: 20px;
}

.Notice-1 {
  height: 14px;
  margin: 10px 0;
  margin-right: 50px;
}

.Notice-2 {
  height: 14px;
}

:deep(.is-active) {
  .el-radio-button__inner {
    background-color: #F43107;
    border: 1px solid #F43107;
  }

}

:deep(.el-radio-button__inner) {
  height: 24px !important;
  padding: 5px 10px;
  background-color: transparent;
  border: none;
  border-left:none !important; 
 
}
:deep(.el-checkbox-button__inner) {
  background-color: transparent;
  border: none;
  border-left:none !important; 
}

:deep(.el-radio-group :hover) {
  color: #F43107 !important;
}

:deep(.el-radio-group .is-active :hover) {
  color: #fff !important;
}

:deep(.is-checked) {
  .el-checkbox__inner {
    background-color: #F43107;
    border: 1px solid #F43107;
  }

  .el-checkbox__label {
    color: #F43107;
  }

}

.jine {
  width: 178px;
  height: 24px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #A9B1BE;
  margin-top: 20px;
  display: flex;
  padding-left: 10px
}

.search_mput {
  width: 60px;
  outline: none;
  border: none;
}

.cz {
  // width: 48px;
  height: 24px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #A9B1BE;
  padding: 4px 10px;
  font-size: 14px;
  margin-left: 10px;
  margin-top: 20px;
}

.qd {
  height: 24px;
  background: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #A9B1BE;
  padding: 4px 10px;
  font-size: 14px;
  background-color: #F43107;
  color: #fff;
  margin-left: 10px;
  margin-top: 20px;
}
.diqu{
padding-bottom: 18px;
}
.el-checkbox-button {
  width: calc((100% - 20px) / 3); /* 假设每行3个复选框，20px 是间距 */
  margin-right: 10px; /* 假设每个复选框右边有10px的间距 */
}
.bottom{
  width: calc(100% - 141px);
  height: 80px;
  line-height: 80px;
background: #FFFFFF;
box-shadow: 0px -2px 8px rgba(0,0,0,0.04);
border-radius: 0px;
z-index: 999;
position: fixed; /* 绝对定位 */
    bottom: 0; /* 相对于容器的底部对齐 */
    // left: 0; /* 可选：设置水平位置，这里设置为左对齐 */

}
:deep(.el-radio__inner) {
    border-radius: 2px !important;
  }
 
 :deep(.el-radio__input.is-checked .el-radio__inner::after ){
    content: '';
    width: 8px;
    height: 3px;
    border: 1px solid white;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 3px;
    left: 2px;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
  
  }
  :deep(.is-checked .el-radio__label) {
  color: #F43107;
}
    :deep(.el-radio__input.is-checked .el-radio__inner) {
        background: #F43107 !important;
        border-color: #F43107 !important;
    }
</style>
